<template>
    <div style="width: 100%;height: 100%;background-color: #fff;">
        <div class="community-overview" v-if="tableData.length != 0">

            <div class="community-detail" v-for="(item, index) in tableData" :key="index"
                @click="handleCommunity(item.deptId)">

                <div class="com-name">
                    <img class="com-name-bg" src="../../assets/images/home/xqTitle.png" alt="">
                    <span class="com-name-title">{{item.communityName}}</span>
                    <div class="com-name-rank">
                        <div class="rank">top{{ index + 1 }}</div>
                    </div>
                </div>
                <div class="com-owner">{{ item.businessDepartment }}</span>
                </div>
                <div class="com-info">
                    <div class="com-list">
                        <div class="info-item">
                            <div class="info-item-title">全量融合</div>
                            <div class="info-item-value">{{ item.fullFusion }}</div>
                            <div class="info-item-percentage">{{ item.fullFusionPercentage }}</div>
                        </div>
                        <div class="info-item">
                            <div class="info-item-title">宽带</div>
                            <div class="info-item-value">{{ item.broadband }}</div>
                            <div class="info-item-percentage">{{ item.broadbandPercentage }}</div>
                        </div>
                        <div class="info-item">
                            <div class="info-item-title">FTTR</div>
                            <div class="info-item-value">{{ item.fttr }}</div>
                            <div class="info-item-percentage">{{ item.fttrPercentage }}</div>
                        </div>
                        <div class="info-item">
                            <div class="info-item-title">家庭中屏</div>
                            <div class="info-item-value">{{ item.videoAi }}</div>
                            <div class="info-item-percentage">{{ item.videoAiPercentage }}</div>
                        </div>
                    </div>
                    <div class="com-list">
                        <div class="info-item">
                            <div class="info-item-title">老旧终端升级</div>
                            <div class="info-item-value">{{ item.termUp }}</div>
                            <div class="info-item-percentage">{{ item.termUpPercentage }}</div>
                        </div>
                        <div class="info-item">
                            <div class="info-item-title">移动</div>
                            <div class="info-item-value">{{ item.comboUp }}</div>
                            <div class="info-item-percentage">{{ item.comboUpPercentage }}</div>
                        </div>
                        <div class="info-item">
                            <div class="info-item-title">质差修复</div>
                            <div class="info-item-value">{{ item.popAssess }}</div>
                            <div class="info-item-percentage">{{ item.popAssessPercentage }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <el-empty v-else description="当前日期暂无数据"></el-empty>

        <el-dialog :visible.sync="dialogVisible" title="小区进展详情" width="60%">
            <div class="scroll-shell">
                <el-table :data="communityData">
                    <el-table-column label="小队名称" align="center" prop="salesman" />
                    <el-table-column label="全量融合" align="center" prop="full_fusion" />
                    <el-table-column label="宽带" align="center" prop="broadband" />
                    <el-table-column label="fttr" align="center" prop="fttr" />
                    <el-table-column label="家庭中屏" align="center" prop="video_ai" />
                    <el-table-column label="老旧终端升级" align="center" prop="term_up" />
                    <el-table-column label="移动" align="center" prop="combo_up" />
                    <el-table-column label="质差修复" align="center" prop="pop_assess" />
                </el-table>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    import { communityOverviewList, salesmanPackageDetails } from "@/api/api";
    export default {
        name: "CommunityOverview",
        props: {
            targetTime: null
        },
        watch: {
            targetTime: function (newVal, oldVal) {
                if (newVal == null || newVal == "") {
                    this.postData.targetTime = this.formatDate();
                }
                else {
                    this.postData.targetTime = newVal;
                }
                this.getCommunityOverviewList(this.postData)
            }
        },
        created() {
            this.getCommunityOverviewList(this.postData)
        },
        data() {
            return {
                dialogVisible: false,
                postData: {
                    targetTime: this.formatDate(),
                },
                tableData: [],
                communityData: []
            // tableData: [
            //     {
            //         communityName: '长城山海苑',
            //         businessDepartment: '金昌路',
            //         fullFusion: 4,
            //         fullFusionPercentage: '4%',
            //         broadband: 3,
            //         broadbandPercentage: '3%',
            //         fttr: 2,
            //         fttrPercentage: '2%',
            //         videoAi: 9,
            //         videoAiPercentage: '9%',
            //         termUp: 6,
            //         termUpPercentage: '6%',
            //         comboUp: 5,
            //         comboUpPercentage: '5%',
            //         popAssess: 40,
            //         popAssessPercentage: '40%',
            //     },
            //     {
            //         communityName: '格兰绿都',
            //         businessDepartment: '七里河',
            //         fullFusion: 4,
            //         fullFusionPercentage: '4%',
            //         broadband: 3,
            //         broadbandPercentage: '3%',
            //         fttr: 2,
            //         fttrPercentage: '2%',
            //         videoAi: 9,
            //         videoAiPercentage: '9%',
            //         termUp: 6,
            //         termUpPercentage: '6%',
            //         comboUp: 5,
            //         comboUpPercentage: '5%',
            //         popAssess: 40,
            //         popAssessPercentage: '40%',
            //     },
            //     {
            //         communityName: '恒大绿洲',
            //         businessDepartment: '大砂坪',
            //         fullFusion: 4,
            //         fullFusionPercentage: '4%',
            //         broadband: 3,
            //         broadbandPercentage: '3%',
            //         fttr: 2,
            //         fttrPercentage: '2%',
            //         videoAi: 9,
            //         videoAiPercentage: '9%',
            //         termUp: 6,
            //         termUpPercentage: '6%',
            //         comboUp: 5,
            //         comboUpPercentage: '5%',
            //         popAssess: 40,
            //         popAssessPercentage: '40%',
            //     },
            //     {
            //         communityName: '新康花园',
            //         businessDepartment: '安宁',
            //         fullFusion: 4,
            //         fullFusionPercentage: '4%',
            //         broadband: 3,
            //         broadbandPercentage: '3%',
            //         fttr: 2,
            //         fttrPercentage: '2%',
            //         videoAi: 9,
            //         videoAiPercentage: '9%',
            //         termUp: 6,
            //         termUpPercentage: '6%',
            //         comboUp: 5,
            //         comboUpPercentage: '5%',
            //         popAssess: 40,
            //         popAssessPercentage: '40%',
            //     },
            // ]
        }
    },
    methods: {
        handleCommunity(deptId) {
            salesmanPackageDetails({ deptId, targetTime: this.postData.targetTime }).then(res => { 
                if(res.data.length !== 0){
                    this.dialogVisible = true
                    this.communityData = res.data
                }
                else {
                    this.$message({
                        message: '选中小区无数据',
                        type: 'error'
                    });
                }
            })
        },
        getCommunityOverviewList(query) {
            communityOverviewList(query).then(res => {
                if (res.code == 200) {
                    let tempList = []
                    res.data.forEach(element => {
                        tempList.push({
                            businessDepartment: element.businessDepartment,
                            communityName: element.communityName,
                            deptId: element.deptId,
                            ...element.realTimeData,
                            fullFusionPercentage: this.calculatePercentage(element.realTimeData.fullFusion, element.targetData.fullFusionTarget),
                            broadbandPercentage: this.calculatePercentage(element.realTimeData.broadband, element.targetData.singleBroadbandTarget),
                            fttrPercentage: this.calculatePercentage(element.realTimeData.fttr, element.targetData.fttrTarget),
                            videoAiPercentage: this.calculatePercentage(element.realTimeData.videoAi, element.targetData.videoAiPackage),
                            termUpPercentage: this.calculatePercentage(element.realTimeData.termUp, element.targetData.oldTerminalUpgrade),
                            comboUpPercentage: this.calculatePercentage(element.realTimeData.comboUp, element.targetData.oldPackageUpgrade),
                            popAssessPercentage: this.calculatePercentage(element.realTimeData.popAssess, element.targetData.popAssessTarget),
                        })
                    });
                    this.tableData = tempList
                }
                // this.tableData = res.data
            })
        },
        calculatePercentage(a, b) {
            // 处理除数为0和空的情况，还有a为0的情况
            // if (b === 0 ) {
            //   return "0.00";
            // }
            if (b === 0 || a === 0 || b == '') {
                return "0.00%";
            }
            // 使用整数运算避免浮点误差
            const percentage = Math.round((a * 10000) / b);
            // 格式化为两位小数的百分比字符串
            const integerPart = Math.floor(percentage / 100);
            const decimalPart = String(percentage % 100).padStart(2, '0');

            return `${integerPart}.${decimalPart}%`;
        },
        formatDate(date = new Date()) {
            const year = date.getFullYear()
            const month = date.getMonth() + 1
            const day = date.getDate()
            return `${year}-${month}-${day}`
        }
    }
    }


</script>


<style scoped lang="scss">
    .community-overview {
        width: 100%;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 20px;
        background-color: #FFF;


        .community-detail {
            border: 1px solid #c8c8c8;
            box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
            padding: 10px 10px 0 10px;
            background-color: #e1f3ff;
            cursor: pointer;

            .com-name {
                position: relative;
                font-size: 24px;
                font-weight: 600;

                .com-name-title {
                    position: absolute;
                    top: 20%;
                    left: 50%;
                    transform: translate(-50%, 10%);
                    color: yellow;
                    font-size: 30px;
                }

                .com-name-bg {
                    position: absolute;
                    top: -20%;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 450px;
                    height: 70px;
                }

                .com-name-rank {
                    position: absolute;
                    top: 0;
                    right: 7%;

                    .rank {
                        position: relative;
                        font-style: italic;
                        font-size: 28px;
                        color: red;
                        padding: 0 0 0 10px;
                        border-bottom: 1px solid #8d8f9b;
                    }

                    .rank::before {
                        position: absolute;
                        content: '';
                        left: 0;
                        bottom: 0;
                        width: 1px;
                        height: 50%;
                        background-color: #8d8f9b;
                        transform-origin: bottom right;
                        transform: rotate(15deg);
                    }
                }
            }

            .com-owner {
                display: flex;
                justify-content: center;
                margin-top: 50px;
                font-size: 22px;
                color: #a0aaff;
            }

            .com-info {
                width: 100%;
                margin-top: 5px;



                .com-list {
                    display: flex;
                    align-items: center;
                    justify-content: space-evenly;
                    margin-top: 6px;
                }

                .info-item {
                    width: 200px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    padding: 5px 0;
                    margin-bottom: 4px;
                    font-size: 20px;
                    border-radius: 30px;
                    border: 1px solid #ccc;
                    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);

                    .info-item-title {
                        line-height: 21px;
                        color: #a0aaff;
                        margin-top: 3px;
                    }

                    .info-item-value {
                        font-size: 36px;
                        text-decoration: underline;

                    }

                    .info-item-percentage {
                        color: #8d8f9b;
                    }
                }

            }
        }
    }
</style>